import React from 'react';
import PropTypes from 'prop-types';
import { observer, inject } from 'mobx-react';
import css from './index.less';
import classnames from 'classnames';

@inject('store')
@observer
export default class ToPage extends React.Component {

  static propTypes = {
    actionDetail: PropTypes.any,
    onChange: PropTypes.func,
  };

  constructor(props) {
    super(props);
    this.state = {
      selectedId: props.actionDetail,
    };
  }

  renderMotions(motions) {
    const { onChange } = this.props;
    const { selectedId } = this.state;
    return motions.map(motion => {
      const props = {
        key: motion.id,
        className: classnames({
          [css.row]: true,
          [css.select]: selectedId === motion.id
        }),
        onClick: () => {
          onChange(motion);
          this.setState({
            selectedId: motion.id
          });
        }
      };
      return (
        <div {...props}>
          {motion.title}
        </div>
      );
    });
  }

  render() {
    const { store: { project: { currentPages } } } = this.props;
    const { current: { motions } } = currentPages;
    return (
      <div className={css.box}>
        {
          motions.length ? this.renderMotions(motions) : '暂时没有动效！'
        }
      </div>
    );
  }
}
